import lotteryTurntable from '@/components/lotteryTurntable'
import lotteryNine from '@/components/lotteryNine'
import lotteryTiger from '@/components/lotteryTiger'
import lotteryRedbag from '@/components/lotteryRedbag'
import lotterDollmachine from '@/components/lotteryDollmachine'
import lotteryFlop from '@/components/lotteryFlop'
import { getImageInfo } from "@/util/uniapi";

let canvas = {
    width: 285,
    height: 170,
};
let ctx;
let timer;
export default {
    components: { lotteryTurntable, lotteryNine, lotteryTiger,lotteryRedbag,lotteryFlop,lotterDollmachine },
    data() {
        return {
            title: "",
            prize: [
                { id: 1, name: '转盘抽奖' },
                { id: 2, name: '九宫格抽奖' },
                { id: 3, name: '老虎机抽奖' },
                { id: 4, name: '扭蛋机' },
                { id: 5, name: '开红包' },
                { id: 6, name: '翻牌抽奖' },
                { id: 7, name: '娃娃机' }

            ],
            prizeType: 7,
            ballList: [
                "https://file02.esurl.cn/public/eggMachine/1.png",
                "https://file02.esurl.cn/public/eggMachine/2.png",
                "https://file02.esurl.cn/public/eggMachine/3.png",
                "https://file02.esurl.cn/public/eggMachine/4.png",
            ],
            ballObj: {
                ballNum: 7, //扭蛋机里面的小球数
                awardList: [], //扭蛋机中的小球集合
            },
            disable: false,
        };
    },
    // #ifdef  MP-WEIXIN
    onReady() {
        ctx = uni.createCanvasContext("myCanvas");
        this.init();
    },
    // #endif
    // #ifdef  H5
    mounted() {
        ctx = uni.createCanvasContext("myCanvas");
        this.init();
    },
    // #endif
    onLoad() { 
        uni.showToast({
            title: "左侧列表可上下拖动！！！",
            icon: "none",
            duration:3000
          });
    },
    methods: {
        /**
         * 
         * @param {*} n 抽奖方式
         */
        togglePrize(n) {
            this.prizeType = n;
        },
        /**
         * 转盘抽奖
         */
        getIndex() {
            let index = 2;
            this.$refs.turntable.playReward(index)
        },
        /**
         * 九宫格抽奖
         */
        getNineIndex() {
            let index = 2;
            this.$refs.nine.rolling(index)
        },
        /**
         * 老虎机抽奖
         */
        getTigerIndex() {
            this.$refs.tiger.start(1, 2, 3)
        },
        /**
         * 开红包
         */
        openBag(){
            this.$refs.redbag.openBag(666);
        },
        /**
         * 扭蛋机初始化
         */
        async init() {
            //初始化
            let that = this;
            for (let i = 0; i < that.ballObj.ballNum; i++) {
                //随机生成各色小球
                let index = Math.floor(4 * Math.random()); //取从0到3随机数
                that.ballObj.awardList[i] = new Ball(index, that.ballList[index]); //新建小球对象
               

            }
            let arr = [];
            setTimeout(async () => {
                for (let i = 0; i < that.ballObj.awardList.length; i++) {
                    let cimg = that.ballObj.awardList[i];
                    // #ifdef  H5
                    that.ballObj.awardList[i].path = cimg.img;
                    that.ballObj.awardList[i].run();
                    // #endif
                    // #ifdef  MP-WEIXIN
                    let res = await getImageInfo(cimg.img);
                    that.ballObj.awardList[i].path = res.path;
                    ctx.drawImage(res.path, cimg.x, cimg.y, 60, 60); //绘制小球
                    // #endif

                } //使小球运动
                ctx.draw();


            }, 1000);
        },
        /**
         * 扭蛋机抽奖
         */
        play() {
            console.log(this.disable)
            if (this.disable) return false;
            let that = this;
            that.disable = true;
            clearInterval(timer); //清除计时器
            timer = setInterval(function () {
                ctx.clearRect(0, 0, canvas.width, canvas.height); //清空画布
                for (let i = 0; i < that.ballObj.awardList.length; i++) {
                    that.ballObj.awardList[i].run();
                } //使小球运动
                ctx.draw();
            }, 20);
            setTimeout(() => {
                clearInterval(timer); //清除计时器
                that.disable = false;
            }, 3000);
        },
        catchDoll(){

        }
    },

};


function Ball(index, img) {
    this.r = 30; //小球半径
    this.x = this.rand(canvas.width - this.r * 2); //小球初始横坐标
    this.y = this.rand(canvas.height - this.r * 2); //小球初始纵坐标
    this.color = index; //小球颜色，以下标表示
    this.img = img; //小球素材
    do {
        this.speedX = this.rand(20) - 10;
    } while (this.speedX < 5); //小球横坐标改变速度
    do {
        this.speedY = this.rand(20) - 10;
    } while (this.speedY < 5); //小球纵坐标改变速度
}

Ball.prototype = {
    rand: function (num) {
        //随机数
        return Math.random() * num;
    },
    run: function () {
        //小球运动函数
        this.x += this.speedX;
        this.y += this.speedY;
        if (this.x > canvas.width - this.r * 2) {
            //小球碰到右边界，横坐标速度变为负
            this.speedX = -this.speedX;
        }
        if (this.x < 0) {
            //小球碰到左边界，横坐标速度变为正
            this.speedX = Math.abs(this.speedX);
        }
        if (this.y > canvas.height - this.r * 2) {
            //小球碰到下边界，纵坐标速度变为负
            this.speedY = -this.speedY;
        }
        if (this.y < 0) {
            //小球碰到上边界，纵坐标速度变为正
            this.speedY = Math.abs(this.speedY);
        }
        let cimg = this;

        ctx.drawImage(cimg.path, cimg.x, cimg.y, 60, 60); //绘制小球

    },
};